<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>猜数字小游戏</title>
    <link href="../base/bootstrap5/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <link href="css/index.css" rel="stylesheet"/>
</head>
<body class="position-relative" aria-live="polite" aria-atomic="true" style="width: 100vw;height: 100vh">
<div class="container" style="background-color: darkgrey;">
    <div class="row" >
        <!--工作台 start-->
        <div class="col-8" id="workBench" >
            <div class="row" >
                <!--操作区 start-->
                <div class="col-7" id="operate">
                    操作区
                    <div class="row limit">
                        <div class="col-6 times">
                            剩余次数：<span id="guessCountLimit">0</span> 次
                        </div>
                        <div class="col-6 duration">
                            用时：<span id="timer">00分00秒</span>
                        </div>
                    </div>
                    <div class="row" id="input">
                        <div class="row" id="selecter">
                            <div class="col-6">
                                输入模式选择器
                            </div>
                        </div>
                            <div class="row" id="instance">
                            <div class="col-12">
                                <div class="row justify-content-center">
                                    <label for="userInput" class="col-2 align-self-center">结果</label>
                                    <div class="col-4">
                                        <input type="text" id="userInput" class="form-control" disabled>
                                    </div>
                                </div>
                                <div class="numBtnGroup">
                                    <div class="row row-cols-5 justify-content-center text-center">
                                        <div class="col">
                                            <button type="button" class="btn btn-primary" disabled>0</button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-primary" disabled>1</button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-primary" disabled>2</button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-primary" disabled>3</button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-primary" disabled>4</button>
                                        </div>

                                        <div class="col">
                                            <button type="button" class="btn btn-primary" disabled>5</button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-primary" disabled>6</button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-primary" disabled>7</button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-primary" disabled>8</button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-primary" disabled>9</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="row justify-content-center" id="optBtn">
                                    <div class="col-3">
                                        <button type="button" class="btn btn-warning" disabled>回退</button>
                                    </div>
                                    <div class="col-3">
                                        <button type="button" class="btn btn-primary" disabled>提交</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--操作区 end-->
                <div class="col-1" id="wPlaceholder">
                    占位符
                </div>
                <!--记录器 start-->
                <div class="col-4" id="reporter">
                    记录器
                    <div class="row">
                        <div class="col-2 text-center">次数</div>
                        <div class="col-2 text-center">△</div>
                        <div class="col-2 text-center">○</div>
                        <div class="col-3 text-center">数字</div>
                        <div class="col-3 text-center">time</div>
                    </div>
                    <hr/>
                    <!--<div class="row">
                        <div class="col-2 text-center">1</div>
                        <div class="col-2 text-center">11</div>
                        <div class="col-2 text-center">21</div>
                        <div class="col-3 text-center">9876</div>
                        <div class="col-3 text-center">00:10</div>
                    </div>-->
                </div>
                <!--记录器 end-->
            </div>
        </div>
        <!--工作台 end-->
        <!--占位符 start-->
        <div class="col-1" id="placeholder" style="background-color: white">
            占位符
        </div>
        <!--占位符 end-->
        <!--排行榜 start-->
        <div class="col-3" id="rankingList" style="background-color: yellowgreen">
            排行榜
            <div>
                <button type="button" class="btn btn-primary">日</button>
                <button type="button" class="btn btn-success">周</button>
                <button type="button" class="btn bg-warning">月</button>
            </div>
            <hr/>
            <div>
                <div class="row">
                    <div class="col-1">
                        排名
                    </div>
                    <div class="col-3 text-truncate">
                        圆角头像
                    </div>
                    <div class="col-4">
                        昵称
                    </div>
                    <div class="col-4">
                        用时
                    </div>
                </div>
                <hr/>
                <div class="row">
                    <div class="col-1">
                        1
                    </div>
                    <div class="col-3 ">
                        圆角头像
                    </div>
                    <div class="col-4 text-truncate" data-bs-toggle="tooltip" data-bs-placement="auto" title="曹操曹操曹操曹操曹操曹操曹操曹操">
                        曹操曹操曹操曹操曹操曹操曹操曹操
                    </div>
                    <div class="col-4">
                        04:21
                    </div>
                </div>
                <div class="row">
                    <div class="col-1">
                        2
                    </div>
                    <div class="col-3">
                        圆角头像
                    </div>
                    <div class="col-4">
                        诸葛亮
                    </div>
                    <div class="col-4">
                        04:27
                    </div>
                </div>
                <div class="row">
                    <div class="col-1">
                        3
                    </div>
                    <div class="col-3">
                        圆角头像
                    </div>
                    <div class="col-4">
                        司马懿
                    </div>
                    <div class="col-4">
                        05:03
                    </div>
                </div>
            </div>
        </div>
        <!--排行榜 end-->
    </div>

</div>

<div class="toast-container position-absolute top-0 end-0 p-3" id="toastPlacement">
    <div class="toast" id="testToast">
        <div class="toast-header">
            <img src="" class="rounded me-2" alt="...">
            <strong class="me-auto">Bootstrap</strong>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Hello, world! This is a toast message.
        </div>
    </div>
</div>

<!--后台结果提示的toast-->
<div class="toast-container position-absolute p-3" id="resultToast">
    <div class="toast">
        <div class="toast-header">
            <img src="" class="rounded me-2" alt="...">
            <strong class="me-auto">结果</strong>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            server tips！
        </div>
    </div>
</div>

<!--成功的toast-->
<div class="toast-container position-absolute p-3" id="successToast">
    <div class="toast">
        <div class="toast-header">
            <img src="" class="rounded me-2" alt="...">
            <strong class="me-auto">结果</strong>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            server tips！
        </div>
    </div>
</div>

<br>
<br>
<br>
<br>
<br>

<button class="btn btn-primary" type="button" disabled style="display: none" id="gameLoading">
    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    游戏正在加载，请稍后...
</button>

<button type="button" class="btn btn-primary" id="startGame">点击开始游戏</button>




</body>
<script src="../base/jquery/jquery-3.5.1.min.js"></script>
<script src="../base/bootstrap5/bootstrap.bundle.min.js"></script>
<script src="js/initBSComponent.js"></script>
<script src="../base/layer/layer.js"></script>
<script src="js/Timer.js"></script>
<script src="js/index.js"></script>


</html>